<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>优品抓抓</title>
    <script src="/static/socket.io-1.2.0.js"></script>
    <script src="/static/jquery-1.11.1.js"></script>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            font-size: 40px;
        }
        .ma1{
            background-color: #fff100;
        }
        .ma2{
            width: 30%;
            height: 100px;
            background-color: #e87cfe;
            margin:0 auto;
            text-align: center;
            line-height: 100px;
        }
        .ma3{
            width: 100%;
            height: 300px;
            /*background-color: #7cadfe;*/
            position: absolute;
            z-index: 99;
            top: 100px;
        }
        .a1{
            float: left;
            width: 30%;
            height: 300px;
            background-color: #71e8e0;
            border-radius: 0 0 20px 0;
        }
        .a2{
            float: right;
            width: 40%;
            height: 110px;
            background-color: #09f86f;
            border-radius: 0 0 0 20px;
        }
        .a2 div{
            float: left;
        }
        .c0{
            margin-left: 10px;
            text-align: center;
        }
        .c1{
            margin-top: 15px;
            margin-left: 3px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #0e09f8;
        }
        .ma4{
            width: 100%;
            height: 180px;
            background-color: rgba(255, 239, 94, 0.39);
            position: absolute;
            z-index: 99;
            top: 50%;

            line-height:180px;
            text-align: center;
        }
        .ma5{

            width: 100%;
            height: 92%;
            background-color: #696969;
            /*line-height: 3000%;*/
            text-align: center;
        }
        .ma6{
            width: 100%;
            height: 440px;

            position: absolute;
            bottom: 0;
            background-color: #fff100;
        }
        .b1{
            float:left;
            width: 50%;
            height: 440px;
            /*background-color: #5509f8;*/
            margin-left: 90px;
        }
        .b2{
            float: right;
            width: 30%;
            height: 280px;
            background-color: #f809eb;
            border-radius: 30%;
            margin-right: 30px;
            margin-top: 45px;
            text-align: center;
            line-height: 280px;

        }
       /* .b1 div{
            margin:0 auto;
        }*/
        .w1{
            float: left;
        }
        .w2{
            float: right;
        }
        .q1,.q3{
            margin: 0 auto;
            margin-top: 12px;
        }
        .q2{
            width: 100%;
            height: 170px;
            margin-top: -55px;
        }
        .q3{
            margin-top: -55px;
        }
        .q1,.w1,.w2,.q3{
            width: 170px;
            height: 170px;
            line-height: 170px;
            text-align: center;
            border-radius: 50%;
            font-size: 60px;
            background-color: #fff;
        }
        .ma7{
            width: 140px;
            height: 130px;
            text-align: center;
            line-height: 130px;

            position: absolute;
            top: 530px;
            right: 0;
            border-radius: 10px 0 0 10px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="ma1">
        <div class="ma2"><!--logo -->
            logo
        </div>
        <div class="ma3"><!--用户、排队人员  -->
            <div class="a1">用户头像</div>
            <div class="a2">
                <div class="c0">
                    <p><span>99</span>人</p>
                    <p>在排队</p>
                </div>
                <div class="c1"></div>
                <div class="c1"></div>
                <div class="c1"></div>
            </div>
        </div>
        <div class="ma4"><!--弹幕-->
            弹幕
        </div>
        <div class="ma5"><!--直播视频-->
            <img id="receiver" style="width:100%;height:75%"/>
        </div>
        <div class="ma6"><!--按钮-->
            <div class="b1">
                <div class="q1">后</div>
                <div class="q2">
                    <div class="w1">左</div>
                    <div class="w2">右</div>
                </div>
                <div class="q3">前</div>
            </div>
            <div class="b2">
                下抓
            </div>
        </div>

        <div class="ma7"><!--按钮-->
            转镜头
        </div>

    </div>

    <script type="text/javascript" charset="utf-8">
        var image = document.getElementById('receiver');
        var socket = io();
        socket.on('video', function(msg){
            image.src=msg;
        });
    </script>

</body>
</html>
